<!DOCTYPE html>
<html style="height: 100%;">

<head>
    <title>信息科开放平台</title>
    <link rel="shortcut icon" href="/static/img/Icon.ico"> <!-- 网站图标 必须ico文件 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
    <script src="/static/js/jquery-3.4.1.min.js"></script>

    <!--引入WebSocket断线重连插件-->
    <script src="/static/js/reconnecting-websocket.min.js"></script>

    <!-- 引入CSS： elementUI -->
    <link rel="stylesheet" href="/static/element-UI/index.css">
    <!-- 引入JS： Vue (before ElementUI JS)-->
    <script src="/static/vue/vue.js"></script>
    <!-- 引入JS： ElementUI JS -->
    <script src="/static/element-UI/index.js"></script>


    <style>
        body {
            /* 鼠标指针的样式 */
            cursor: url(/static/img/cursor.ico), auto;
        }
    </style>
    <script>
        // 低版本谷歌不支持ES6，没有padStart函数，解决办法是自己重新实现String.prototype.padStart
        // 需在head中定义
        if (!String.prototype.padStart) {
            String.prototype.padStart = function padStart(targetLength, padString) {
                targetLength = targetLength >> 0; //floor if number or convert non-number to 0;
                padString = String((typeof padString !== 'undefined' ? padString : ' '));
                if (this.length > targetLength) {
                    return String(this);
                } else {
                    targetLength = targetLength - this.length;
                    if (targetLength > padString.length) {
                        padString += padString.repeat(targetLength / padString.length); //append to original to ensure we are longer than needed
                    }
                    return padString.slice(0, targetLength) + String(this);
                }
            };
        }
    </script>
</head>


<body style="height: 100%;overflow:hidden;margin: 0px;">
<div id="app" style="height: 100%;">

    <!--    顶栏  -->
    <el-row id="topMenuRow">
        <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                @select="topMenu_handleSelect"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
            <el-menu-item index="1">疫苗接种叫号系统</el-menu-item>

            <el-submenu index="2" style="float: right">
                <template slot="title" id="userNameText">信息科 陈呵呵</template>
                <el-menu-item index="2-1">个人资料</el-menu-item>
                <el-menu-item index="2-2">注销</el-menu-item>
            </el-submenu>

        </el-menu>
    </el-row>


    <el-row style="height: 100%">
        <!--    左侧菜单    -->
        <el-col :span="3" style="height: 100%">
            <el-menu
                    default-active="1"
                    class="el-menu-vertical-demo"
                    @open="leftMenu_handleOpen"
                    @close="leftMenu_handleClose"
                    @select="leftMenu_handleSelect"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                    style="height: 100%">
                <el-menu-item index="1">
                    <i class="el-icon-menu"></i>
                    <span slot="title">叫号</span>
                </el-menu-item>
                <el-menu-item index="2">
                    <i class="el-icon-menu"></i>
                    <span slot="title">身份证取号</span>
                </el-menu-item>
                <el-menu-item index="3">
                    <i class="el-icon-document"></i>
                    <span slot="title">统计报表</span>
                </el-menu-item>

            </el-menu>
        </el-col>

        <!--     右侧工作区域    -->
        <el-col :span="20" :offset="1" style="height:100%;">

            <!--空白间隔栏-->
            <el-row style="height: 20px;"></el-row>
            <!--       工具栏-->
            <el-row id="toolBarRow">
                <el-form :inline="true" :model="toolBarData" class="demo-form-inline" size="small">
                    <el-form-item label="呼叫队列：">
                        <el-input v-model="toolBarData.dxmc" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="呼叫窗口：">


                        <el-select v-model="currentSelectObj" placeholder="请选择窗口" id="selectZsmc">
                            <el-option
                                    v-for="item in options"
                                    :key="item.id"
                                    :label="item.zsmc"
                                    :value="item"
                                    :disabled="item.disabled"
                                    @change="onChangeElSelect($event)"
                            >
                            </el-option>
                        </el-select>

                    </el-form-item>
                    <el-form-item>
                        <el-button id="btn_callNext" type="warning" round @click="callNext()"
                                   :loading="isLoading_btn_callNext"
                        >叫号
                        </el-button>
                    </el-form-item>
                </el-form>

            </el-row>

            <!--  分割线   -->
            <el-row id="dividerRow">
                <el-col :span="17">
                    <el-divider></el-divider>
                </el-col>
            </el-row>

            <!--表格区域-->
            <el-row style="height:100%;">

                <el-row id="tableLabelRow">
                    <el-col :span="8">
                        <el-tag type="info">待叫号</el-tag>
                    </el-col>
                    <el-col :span="16">
                        <el-tag type="info">已叫号</el-tag>
                    </el-col>
                </el-row>
                <!-- 待叫号表格-->
                <el-col id="wjhTableCol" :span="8" style="overflow-y:scroll;">

                    <el-table
                            :data="tableData_wjh"
                            stripe
                            style="width: 100%"
                            size="small">
                        <el-table-column
                                prop="pdhm"
                                label="排队号">
                        </el-table-column>
                        <el-table-column
                                prop="brxm"
                                label="姓名">
                        </el-table-column>
                        <el-table-column
                                prop="yysj"
                                label="取号时间"
                                :formatter="dateFormatYYSJ">
                        </el-table-column>
                    </el-table>
                </el-col>
                <!-- 已叫号表格-->
                <el-col id="yjhTableCol" :span="16" style="overflow-y:scroll;">
                    <el-table
                            :data="tableData_yjh"
                            stripe
                            style="width: 100%;"
                            size="small">
                        <el-table-column
                                prop="pdhm"
                                label="排队号"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="brxm"
                                label="姓名"
                                align="center">
                            <!--当前窗口正在被叫的病人，颜色变为金色-->
                            <template slot-scope="scope">
                                <label v-if="scope.row.jhzt == 1 && scope.row.jhzs==currentSelectObj.zsmc"
                                       style="font-weight:bold;color:#ebb563;font-size:13px"> {{scope.row.brxm}}</label>
                                <label v-else> {{scope.row.brxm}}</label>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="yysj"
                                label="取号时间"
                                width="140px"
                                align="center"
                                :formatter="dateFormatYYSJ">
                        </el-table-column>
                        <el-table-column
                                prop="jhzs"
                                label="叫号窗口"
                                align="center">
                        </el-table-column>

                        <el-table-column
                                prop="jhryxm"
                                label="操作人员"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="jhsj"
                                label="叫号时间"
                                width="140px"
                                align="center"
                                :formatter="dateFormatJHSJ"
                        >
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                align="center">
                            <template slot-scope="scope">
                                <!-- 重叫按钮仅允许点击正在叫号的病人 -->
                                <el-button v-if="scope.row.jhzt == 1 && scope.row.jhzs==currentSelectObj.zsmc"
                                           id="btn_reCall" @click="reCall(scope.row,scope.$index)" type="warning"
                                           size="small"
                                           element-loading-spinner="path">
                                    重叫
                                </el-button>
                                <el-button v-else id="btn_reCall" @click="reCall(scope.row,scope.$index)" type="info"
                                           size="small" plain
                                           element-loading-spinner="path" disabled>
                                    重叫
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </el-col>
    </el-row>
</div>


<script>
    /*
    *  定义全局变量
    */
    var g_toastHandle;  // vue创建的toast实例，用于提示正在叫号的病人
    var IpAndPort = window.location.host; // IP和端口号

    // 解析token
    var token = getCookie('token');
    var strings = token.split("."); //截取token，获取载体
    var userInfo = JSON.parse(decodeURIComponent(escape(window.atob(strings[1].replace(/-/g, "+").replace(/_/g, "/"))))); //解析，需要吧‘_’,'-'进行转换否则会无法解析
    $("#userNameText")[0].innerHTML = "&nbsp;[&nbsp;" + userInfo.ksmc + "&nbsp;]&nbsp;&nbsp;" + userInfo.ygxm;


    // 本页面的vue对象
    var vue = new Vue({
        el: '#app',
        data() {
            return {
                activeIndex: '1',
                currentSelectObj: {},  // EL-Select选择器选中的option对象
                options: [{
                    ID: 1,
                    dlxh: 2,
                    zsmc: '窗口1',
                    LEDckh: 1,
                    value: '1'
                }, {
                    ID: 2,
                    dlxh: 2,
                    zsmc: '窗口2',
                    LEDckh: 2,
                    value: '2'

                }],
                tableData_yjh: [{
                    yysj: '2016-05-04 08:01:12',
                    name: '王小虎',
                    pdhm: '001',
                    jhzs: '窗口1',
                    jhryxm: '林晓美',
                    jhsj: '2016-05-04 08:01:12'
                }, {
                    yysj: '2016-05-04 08:01:12',
                    name: '王小虎',
                    pdhm: '002',
                    jhzs: '窗口2',
                    jhryxm: '陈呵呵',
                    jhsj: '2016-05-04 08:01:12'
                }],
                tableData_wjh: [],
                toolBarData: {
                    dxmc: '疫苗接种队列',
                    zsmc: null
                },
                isLoading_btn_callNext: false
            };
        },
        methods: {
            //
            // 点击【菜单栏】
            //
            topMenu_handleSelect(key, keyPath) {
                console.log(key, keyPath);
                if(key=='2-2'){
                    document.cookie = "token=;path=/";  // token置空
                    window.location.href = "http://" + IpAndPort + "/ViewController/Login";
                }
            },
            leftMenu_handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            leftMenu_handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            leftMenu_handleSelect(key, keyPath) {
                console.log(key, keyPath);
                if (key == '1') {
                    //window.location.href = "http://" + IpAndPort + "/ViewController/YM_CallNumber";
                } else if (key == '2') {
                    window.location.href = "http://" + IpAndPort + "/ViewController/YM_TakeNumber";
                }
                else  if(key=='3'){
                    window.location.href = "http://" + IpAndPort + "/ViewController/YM_Statistic";
                }
            },
            // 当EL-Select选择器的项被用户修改时
            onChangeElSelect(e) {
                currentSelectObj = e;   // 记录当前被选择的对象
            },
            //
            // table时间格式化
            //
            dateFormatYYSJ: function (row, column) {
                var fmt = "YYYY-mm-dd HH:MM:SS";
                var date = new Date(row.yysj);//row 表示一行数据, yysj 表示要格式化的字段名称
                var ret;
                const opt = {
                    "Y+": date.getFullYear().toString(),        // 年
                    "m+": (date.getMonth() + 1).toString(),     // 月
                    "d+": date.getDate().toString(),            // 日
                    "H+": date.getHours().toString(),           // 时
                    "M+": date.getMinutes().toString(),         // 分
                    "S+": date.getSeconds().toString()          // 秒
                    // 有其他格式化字符需求可以继续添加，必须转化成字符串
                };
                for (var k in opt) {
                    ret = new RegExp("(" + k + ")").exec(fmt);
                    if (ret) {
                        fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
                    }
                    ;
                }
                ;
                return fmt;
            },
            dateFormatJHSJ: function (row, column) {
                var fmt = "YYYY-mm-dd HH:MM:SS";
                var date = new Date(row.jhsj);//row 表示一行数据, yysj 表示要格式化的字段名称
                var ret;
                const opt = {
                    "Y+": date.getFullYear().toString(),        // 年
                    "m+": (date.getMonth() + 1).toString(),     // 月
                    "d+": date.getDate().toString(),            // 日
                    "H+": date.getHours().toString(),           // 时
                    "M+": date.getMinutes().toString(),         // 分
                    "S+": date.getSeconds().toString()          // 秒
                    // 有其他格式化字符需求可以继续添加，必须转化成字符串
                };
                for (var k in opt) {
                    ret = new RegExp("(" + k + ")").exec(fmt);
                    if (ret) {
                        fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
                    }
                    ;
                }
                ;
                return fmt;
            },
            //
            // 点击【重叫】
            //
            reCall(row, index) {

                console.log(row);
                $("[id=btn_reCall]")[index].blur();  // 按钮颜色恢复

                /* 传递MAP */
                var map = new Map();
                map.set("id", row.id);

                //map转obj
                var obj = Object.create(null);
                for (var key of map) {
                    obj[key[0]] = key[1];
                }

                $.ajax({
                    url: "http://" + IpAndPort + "/CallNumberController/reCall",
                    type: "POST",
                    contentType: 'application/json;charset=utf-8',
                    data: JSON.stringify(obj),
                    xhrFields: {
                        withCredentials: true
                    },
                    success: function (data) {
                        var jsonObj = $.parseJSON(data);
                        if (jsonObj.status == false) {
                            vue.$message.error('重叫失败：' + jsonObj.detail);
                        } else if (jsonObj.status == true) {

                        }
                    },
                    error: function (data) {
                        vue.$message.error('重叫失败：连接服务端失败...');
                    }
                });

            },
            //
            // 点击【叫号】
            //
            callNext() {

                $("#btn_callNext").blur();  // 按钮颜色恢复

                //
                if ($("#selectZsmc").val() == '') {
                    vue.$message.warning('请选择窗口号');
                    return;
                }

                // 点击叫号后，按钮禁用1秒
                vue.isLoading_btn_callNext = true; // 按钮loading样式
                var timeoutObj = setTimeout(function () {
                    vue.isLoading_btn_callNext = false; // 按钮loading样式
                    // 清除已设置的setTimeout对象
                    clearTimeout(timeoutObj)
                }, 1 * 1000); // 1秒

                // 关闭上一次的toast提示
                if (g_toastHandle != undefined) {
                    g_toastHandle.close();
                }

                //
                /* 传递MAP */
                var map = new Map();
                map.set("dlxh", 2); // 暂时写死
                map.set("dlmc", "疫苗接种队列"); // 暂时写死
                map.set("jhzs", this.currentSelectObj.zsmc);
                map.set("LEDckh", this.currentSelectObj.LEDckh);
                map.set("jhzsPcName", "");

                //map转obj
                var obj = Object.create(null);
                for (var key of map) {
                    obj[key[0]] = key[1];
                }
                $.ajax({
                    url: "http://" + IpAndPort + "/CallNumberController/callNext",
                    type: "POST",
                    contentType: 'application/json;charset=utf-8',
                    data: JSON.stringify(obj),
                    xhrFields: {
                        withCredentials: true
                    },
                    success: function (data) {
                        var jsonObj = $.parseJSON(data);
                        if (jsonObj.status == false) {
                            vue.$message.error('叫号失败：' + jsonObj.detail);
                        } else if (jsonObj.status == true) {


                            // 接收叫号信息
                            var pdxx = $.parseJSON(jsonObj.detail);
                            var pdhm = pdxx.pdhm;
                            var brxm = pdxx.brxm;
                            var sfzh = pdxx.sfzh;
                            var yysj = pdxx.yysj;

                            // 关闭上一次的toast提示
                            if (g_toastHandle != undefined) {
                                g_toastHandle.close();
                            }

                            // toast提示正在叫的病人
                            const h = vue.$createElement;
                            g_toastHandle = vue.$notify({
                                title: '正在叫号',
                                message: h('b', {style: 'color: #ebb563;font-size:16px'}, '[' + pdhm + '号] ' + brxm),
                                offset: 70, // 偏移70位置
                                duration: 0 // 不自动关闭
                            });
                        }
                    },
                    error: function (data) {
                        vue.$message.error('叫号失败：连接服务端时发生错误');
                        vue.isLoading_btn_callNext = false;
                    }
                });

            }
        }
    });


    //===========================================================================
    // 获取诊室列表（暂时写死，后续将改为选择队列后再从服务端获取）
    var tempMap = new Map();
    tempMap.set("dlxh", 2);
    tempMap.set("dlmc", "疫苗接种队列");
    //map转obj
    var tempObj = Object.create(null);
    for (var key of tempMap) {
        tempObj[key[0]] = key[1];
    }
    $.ajax({
        url: "http://" + IpAndPort + "/CallNumberController/getZsxx",
        type: "POST",
        contentType: 'application/json;charset=utf-8',
        data: JSON.stringify(tempObj),
        success: function (data) {
            var jsonObj = $.parseJSON(data);
            if (jsonObj.status == true) {
                // 赋值
                var zsxxList = $.parseJSON(jsonObj.detail);
                vue.options = zsxxList;
            } else {
                vue.$message.error('获取诊室信息失败：' + jsonObj.detail);
            }
        },
        error: function (data) {
            vue.$message.error('获取诊室信息失败：连接服务端失败');
        }
    });
    //===========================================================================


    // 创建socket连接（WebSocket握手）
    console.log("尝试WebSocket连接");
    var ws = new ReconnectingWebSocket("ws://" + IpAndPort + "/Server_YM");
    //当WebSocket创建成功时，触发onopen事件
    ws.onopen = function () {
        console.log("进入onopen事件");

        // 消息发送到服务端
        console.log("发送消息：initData");
        ws.send("initData");

    }

    //当收到服务端发来的消息时，触发onmessage事件
    ws.onmessage = function (e) {

        console.log("接收到消息：" + e.data);
        var jsonObj = $.parseJSON(e.data);
        if (jsonObj.status == true) {
            var dataList = jsonObj.detail.split("&");
            wjhList = JSON.parse(dataList[0]);    // 未叫号列表
            yjhList = JSON.parse(dataList[1]);    // 已叫号列表

        } else if (jsonObj.status == false) {
            vue.$message.error('获取叫号数据失败：' + jsonObj.detail);
            return;
        }

        // 装载数据
        vue.tableData_wjh = wjhList;
        vue.tableData_yjh = yjhList;
    }

    ws.onclose = function (e) {
        console.log("WS连接已关闭");
    }

    //
    // 重设表格高度
    //
    var 网页总高度 = $("#app")[0].clientHeight;
    var 顶栏高度 = $("#topMenuRow")[0].clientHeight;
    var 间隔栏写死20px = 20;
    var 工具栏高度 = $("#toolBarRow")[0].clientHeight;
    var 分割线高度 = $("#dividerRow")[0].clientHeight;
    var 表格标签高度 = $("#tableLabelRow")[0].clientHeight;
    var 表格高度 = 网页总高度 - 顶栏高度 - 间隔栏写死20px - 工具栏高度 - 分割线高度 - 表格标签高度;
    $("#wjhTableCol").css("height", 表格高度);
    $("#yjhTableCol").css("height", 表格高度);


    /*
    * JS工具方法
    * */

    /**
     * 获取指定名称的cookie
     */
    function getCookie(name) {
        var strcookie = document.cookie;//获取cookie字符串
        var arrcookie = strcookie.split("; ");//分割
        //遍历匹配
        for (var i = 0; i < arrcookie.length; i++) {
            var arr = arrcookie[i].split("=");
            if (arr[0] == name) {
                return arr[1];
            }
        }
        return "";
    }

    /**
     * 时间日期格式化
     *
     */
    function dateFormat(fmt, date) {
        var ret;
        const opt = {
            "Y+": date.getFullYear().toString(),        // 年
            "m+": (date.getMonth() + 1).toString(),     // 月
            "d+": date.getDate().toString(),            // 日
            "H+": date.getHours().toString(),           // 时
            "M+": date.getMinutes().toString(),         // 分
            "S+": date.getSeconds().toString()          // 秒
            // 有其他格式化字符需求可以继续添加，必须转化成字符串
        };
        for (var k in opt) {
            ret = new RegExp("(" + k + ")").exec(fmt);
            if (ret) {
                fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
            }
            ;
        }
        ;
        return fmt;
    }

    //鼠标点击弹出❤
    jQuery(function ($) {
        showLoveWhenMouseClick(window, document);
    });


</script>

</body>
<!-- 在body之后加载鼠标点击特效的JS（鼠标点击放烟花、弹出❤） -->
<script src="/static/js/mouse-click.js"></script>


</html>